<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/images/favicon/favicon.png">
    <title>雫るる| 同人图</title>
    <link rel="stylesheet" href="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/layui/css/layui.css">
    <link rel="stylesheet" href="./static/css/base.css">
    <link rel="stylesheet" href="./static/css/titlebar.css">
    <link rel="stylesheet" href="./static/css/photo.css">
    <link rel="stylesheet" href="./static/css/nav.css">
    <link href="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/viewer/viewer.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/layui/layui.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/viewer/viewer.js"></script>
    <script src="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/v-viewer/v-viewer.js"></script>
    <style>
        body {
            font-family: "./font/PingFang Bold.ttf";
            background-color: #FC598E;
        }

        @media screen and (max-width: 768px) {
            .layui-col-sm6 {
                width: 100%;
                padding: 10px;
            }

            .left {
                display: none;
            }

            .container {
                padding: 0px;
            }
        }

        @media screen and (max-width: 500px ) {
            .photo-list img {
                height: auto;
                width: 100%;
                flex-grow: 0;
                border-width: 5px 0;
                border-color: #ea668e;
                border-style: solid;
            }

            .layui-tab {
                overflow: hidden;
                overflow-x: scroll;
            }
            .right{
                display: none;
            }
        }
    </style>
</head>

<body>           
    <div class="header">
        <div class="layui-container main" id="nav_container">
            <div class="logo" >
                <img src="./static/images/lulu_logo.png" width="98px" alt="">
            </div>
            <input type="checkbox"  id="nav-toggle" class="nav-toggle">
            <label for="nav-toggle" id="mobile-icon">
                <span class="menu-icon">
                    <i class="layui-icon layui-icon-app"></i>  
              </span>
            </label>
            <div class="page_nav">
                <ul class="layui-nav">
                    <li class="layui-nav-item">
                        <a href="index.html">首页</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item">
                        <a href="personal.html">个人简介</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item ">
                        <a href="music.html">音乐</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item">
                        <a href="video.html ">视频</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item layui-this">
                        <a href="photo.html ">同人图</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item">
                        <a href="meme.html">表情包</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item ">
                        <a href="about.html">关于</a>
                        <div class="radius"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-container">  
    <div id="app">
        <div class="layui-row headline container">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
                <h1 class="left">同人图</h1>
                <h1 class="right">PHOTO</h1>
            </div>
        </div>
        <div class="layui-tab layui-tab-brief tab-bar" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li @click="handleCurrentCatalogChange(null)" v-bind:class="{'layui-this': choseAll}">
                    所有
                </li>
                <li v-for="item in catalog" @click="handleCurrentCatalogChange(item.name)" v-bind:class="{'layui-this': item.chosen}">
                    {{item.name}}
                </li>
            </ul>
        </div>

        <div class="photo-list container" v-viewer>
            <img v-for="item in list" :src="item.url" :alt="item.name">
        </div>

        <div class="photo-pagination container">
            <el-pagination
                small
                background
                :pager-count=5
                :page-size="pageSize"
                layout="prev, pager, next"
                @current-change="handleCurrentPageChange"
                :total="count">
            </el-pagination>
        </div>

    </div>
</div>

    <script type="text/javascript">
        Vue.use(VueViewer.default)
        var app = new Vue({
            el: '#app',
            data: {
                catalog: [],
                list: [],
                currentCatalog: null,
                choseAll: true,
                pageSize: 10,
                count: 0,
                cruentPage: 1,
                apiPrefix: "//back.lulufans.cn:3000/api/v1",
                api: {
                    getCatalog: {
                        url: "/catalog-list/photo"
                    },
                    getList: {
                        url: "/photo-list"
                    },
                }
            },
            created() {
                this.fetchData()
            },
            methods: {
                fetchData() {
                    this.getCatalog();
                    this.getList(1);
                },
                getCatalog() {
                    return axios.get(this.apiPrefix + this.api.getCatalog.url)
                        .then(response => {
                            this.catalog = response.data.data.rows
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                getList(page) {
                    return axios.get(`${this.apiPrefix}${this.api.getList.url}?pageSize=${this.pageSize}&page=${page}`)
                        .then(response => {
                            this.count = response.data.data.count
                            this.list = response.data.data.rows
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                getListByCatalog(page, catalog) {
                    return axios.get(`${this.apiPrefix}${this.api.getList.url}?pageSize=${this.pageSize}&page=${page}&catalog=${catalog}`)
                        .then(response => {
                            this.count = response.data.data.count
                            this.list = response.data.data.rows
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                handleCurrentCatalogChange(catalog) {
                    this.cruentPage = 1
                    if (!catalog) {
                        this.choseAll = true
                        this.currentCatalog = null
                        this.catalog.forEach(e=>{
                            e.chosen = false
                        })
                        return this.getList(1)
                    }
                    else {
                        this.choseAll = false
                        this.currentCatalog = catalog
                        this.catalog.forEach(e=>{
                            if (e.name == catalog) {
                                e.chosen = true
                            }
                            else {
                                e.chosen = false
                            }
                        })
                        return this.getListByCatalog(1, catalog)
                    }
                },
                handleCurrentPageChange(cruentPage){
                    this.cruentPage = cruentPage;
                    if (this.currentCatalog) {
                        return this.getListByCatalog(cruentPage, this.currentCatalog);
                    }
                    else {
                        return this.getList(cruentPage);
                    }
                }
            },
        });
    </script>
</body>

</html>